<template>
  <div class="container">
    <div class="c_inside">
      <div class="c_logo">
        <img :src="logo" style="width: 60px; height: 60px" />
      </div>
      <div class="c_menu">
        <a-menu mode="horizontal" v-model="currentRoute" @click="handleGo">
          <a-menu-item key="/">首页</a-menu-item>
          <a-menu-item key="/material">植物素材库</a-menu-item>
          <a-menu-item key="/base">基础案例库</a-menu-item>
          <a-menu-item key="/compre">综合案例库</a-menu-item>
          <a-menu-item key="/lumion">Lumion实例库</a-menu-item>
        </a-menu>
      </div>
      <div class="c_login">
        <el-button
          v-if="userToken === false"
          type="primary"
          size="small"
          @click="goLogin"
          >登录</el-button
        >
        <div v-if="userToken !== false">
          <el-dropdown>
            <i
              class="iconfont icon-denglu-copy"
              style="
                font-size: 30px;
                border-radius: 50%;
                border: 1px solid #ccc;
                color: 3;
                color: #1890ff;
                padding: 3px;
              "
            ></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled
                ><i class="iconfont icon-denglu"></i
                >{{ userName }}</el-dropdown-item
              >
              <el-dropdown-item
                ><i class="iconfont icon-exit-logon"></i
                ><el-button type="text" size="small" @click="loginOut"
                  >退出登录</el-button
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logo from "@/assets/imgs/logo1.png";
import { logout } from '@/api/login.js'

export default {
  name: "Menu",
  components: {},
  data() {
    return {
      userName: '',
      userToken: false,
      logo,
      currentRoute: ['/']
    };
  },
  created() {
    // console.log('created')
    // console.log(this.$route.path)
    this.currentRoute = [this.$route.path]
    if (localStorage.getItem('user-token')) {
      this.userToken = localStorage.getItem('user-token')
      this.userName = localStorage.getItem("user-name")
    }
  },
  watch: {
    $route(route) {
      // console.log(route.path)
      if (route.path) {
        const path = route.path
        if (['/overview', '/cdetail'].includes(path)) {
          this.currentRoute = ['/base']
        } else if (['/pdetail'].includes(path)) {
          this.currentRoute = ['/material']
        } else if (['/c_overview', '/ccdetail'].includes(path)) {
          this.currentRoute = ['/compre']
        } else {
          this.currentRoute = [path]
        }
      }
    },
  },
  methods: {
    handleGo(e) {
      if (this.$route.path !== e.key) {
        this.$router.push(e.key)
        this.currentRoute = [e.key]
      }
    },
    goLogin() {
      this.$router.push({ path: "/login" });
    },
    loginOut() {
      logout(this.userToken).then(() => {
        localStorage.removeItem('user-token')
        this.$router.push('/login')
      })
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .ant-menu-item {
  font-size: 18px;
  color: #333;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.c_inside {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80%;
  width: 100%;
  .c_logo {
    width: 100px;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .c_menu {
    flex: 1;
    margin-right: 10px;
    .el-menu.el-menu--horizontal {
      border: 0px;
    }
    .el-menu-item {
      color: #333;
      font-size: 16px;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
      // color: #71933f;
      // border-bottom: 2px solid #71933f;
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }
    .ant-menu-horizontal {
      white-space: normal;
      border-bottom: 0px;
      background: #f1f2f3;
      line-height: 77px;
    }
  }
  .c_login {
    flex-shrink: 0;
    .el-button--small {
      padding: 9px 20px;
      font-size: 15px;
      border-radius: 10px;
    }
  }
}
</style>
